<template>
  <codemirror
    v-model="codeValue"
    :extensions="extensions"
    @update:value="onChange"
    border
  />
</template>

<script setup>
import { ref, computed } from "vue";
import { Codemirror } from "vue-codemirror"; // CodeMirror 6 的 Vue 组件
import { python } from "@codemirror/lang-python"; // 6.x 的 Python 模式
import { dracula } from "@uiw/codemirror-theme-dracula"; // 6.x 的 Dracula 主题
import { lineNumbers, highlightActiveLineGutter } from "@codemirror/view";
// import { readonly } from "@codemirror/state"; // 新增：导入只读扩展
// 导入 EditorState（关键）
import { EditorState } from "@codemirror/state";
import {
  defaultHighlightStyle,
  syntaxHighlighting,
} from "@codemirror/language";
import { closeBrackets } from "@codemirror/autocomplete";

const emit = defineEmits(["change"]);
const props = defineProps({
  value: { type: String, default: "" },
  readOnly: { type: Boolean, default: false },
});

const codeValue = ref(props.value);

// 计算扩展：根据 readOnly 动态添加只读扩展
const extensions = computed(() => {
  // 基础扩展（无论是否只读都需要的配置）
  const baseExtensions = [
    lineNumbers(), // 行号（6.x 用扩展实现）
    highlightActiveLineGutter(), // 高亮当前行 gutter
    python(), // Python 语法模式
    dracula, // Dracula 主题
    closeBrackets(), // 自动闭合括号
    syntaxHighlighting(defaultHighlightStyle, { fallback: true }), // 语法高亮
  ];

  // 如果是只读模式，添加 readonly 扩展
  if (props.readOnly) {
    // return [...baseExtensions, readonly()]; // 关键：通过扩展启用只读
    return [...baseExtensions, EditorState.readOnly.of(true)];
  }

  return baseExtensions;
});
const onChange = (value) => {
  emit("change", value);
};
</script>
<style lang="scss" scoped>
:deep(.cm-editor) {
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
}
</style>
